!<template>
  <div class="detail_box">
    <div class="title">
      <div>{{form.title}}</div>
    </div>
    <div class="operateBtn">
      <el-button size="mini"  @click="handlrDrawer"  type="primary">跟踪情况</el-button>
    </div>
    <el-form class="left_from" ref="form" :model="form"  label-width="80px" :disabled="true">

        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="9">
            <el-form-item label="公告类型" prop="type">
              <el-select style="width: 100%;" v-model="form.type" placeholder="请选择公告类型">
                <el-option
                  v-for="dict in dict.type.ps_message_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="24" type="flex" justify="space-between">
          <el-col :span="11">
            <el-form-item label="封面图">
              <image-upload :isShowTip="false" v-model="form.coverImage"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="摘要" prop="abstracts">
          <el-input type="textarea" v-model="form.abstracts"  placeholder="请输入摘要" />
        </el-form-item>

        <el-form-item label="内容">
          <editor ref="editorSon" v-model="form.noticeContent" :height="200"/>
        </el-form-item>

        <el-form-item v-hasRole="['admin','conservator']" label="处置情况:" style="margin-top:40px">
        	<div class="table_list">
        	  <el-table
        		  :data="FeedbackList"
        		  border
              max-height="400"
        		  style="width: 100%">

        		  <el-table-column
        			prop="unitName"
        			label="处置单位"
        			min-width="200"
        			show-overflow-tooltip
        			>
        		  </el-table-column>

        		  <el-table-column
        			prop="status"
        			label="处置状态"
        			min-width="160">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 0">待接收</span>
                  <span v-if="scope.row.status == 1">已读</span>
                  <span v-if="scope.row.status == 2">已反馈</span>
                </template>
        		  </el-table-column>

        		  <el-table-column
        			prop="feedbackByName"
        			label="处理人"
        			min-width="160"
        			>
        		  </el-table-column>

        		  <el-table-column
        			label="备注"
        			min-width="400">
        			<template slot-scope="scope">
        				<div v-html="scope.row.feedbackContent"></div>
        			</template>
        		  </el-table-column>

        		</el-table>
        	</div>
        </el-form-item>
    </el-form>

      <el-drawer
        title="跟踪情况"
        :visible.sync="drawer"
        size="40%"
        >
        <div class="cont_darawer">
          <div style="color: #333;" v-hasRole="['admin','conservator']">接收情况{{ '(' + acceptanceList.acceptanceNumber + '/' +acceptanceList.transmissionsNumber + ')'}}</div>
          <div class="unitList" v-hasRole="['admin','conservator']">
            <div class="unitItem" v-for="(item,index) in acceptanceList.psNoticeRecords" :key="index">
              <div class="unitname">{{item.unitName}}</div>
              <img class="readImg" v-if="item.status == 1" src="@/assets/images/已读(1).png" alt="">
<!--              <img class="readImg" v-else src="@/assets/images/未读.png" alt="">-->
              <el-popover
                  placement="bottom-start"
                  title="反馈内容:"
                  width="200"
                  trigger="hover">
                  <div v-html="item.feedbackContent">
                  </div>
                  <img class="feekImg" slot="reference"  v-if="item.status == 2" src="@/assets/images/feedback(1).png" alt="">
              </el-popover>
<!--              <img class="feekImg" v-if="item.status != 2" src="@/assets/images/not-feedback.png" alt="">-->
            </div>
          </div>

          <div class="operate_btn" v-hasRole="['common']">
              <el-button
                type="success"
                plain
                size="mini"
                @click="handlerSubmit"
              >提交
              </el-button>
          </div>

          <div style="margin-top:20px;" v-hasRole="['common']">
            <div style="margin-bottom: 10px;">反馈内容：</div>
            <editor v-model="disposeContent" :height="260"/>
          </div>
        </div>
      </el-drawer>
  </div>
</template>


<script>
  import {acceptanceList,getNotice,noticeFeedback,noticeFeedbackList } from "@/api/notice/notice";
  export default {
    dicts: ['ps_message_type'],
    data(){
      return{
        userInfo:JSON.parse(localStorage.getItem('userinfo')),
        Id:'',
        form:{},
        tableData:[],
        drawer:false,
        //处置内容
        disposeContent:'',
        FeedbackList:[],
        acceptanceList:{},
      }
    },
    methods:{
      getList(id){
        getNotice(id).then(response => {
          this.form = response.data;
          this.$nextTick(()=>{
            this.$refs.editorSon.Quill.enable(false)
          })
          this.getAcceptanceList()
        });
      },
      handlrDrawer(){
        this.drawer = true
        this.disposeContent = ''
      },
      //提交
      handlerSubmit(){
        if(!this.disposeContent){
          this.$message.warning('请输入处置内容')
        }else{
           let body = {
             noticeId:this.form.id,
             feedbackContent:this.disposeContent
           }
           noticeFeedback(body).then(res=>{
              if(res.code == 200){
                this.$message.success('提交成功')
                this.drawer = false
                this.getList(this.Id)
                this.getNoticeFeedbackList()
              }
           })
        }
      },
      getNoticeFeedbackList(){
        noticeFeedbackList({noticeId:this.Id}).then(res=>{
          this.FeedbackList = res
        })
      },
      getAcceptanceList(){
        acceptanceList({id:this.form.id,feedbackType:this.form.feedbackType}).then(res=>{
          this.acceptanceList = res
        })
      }
    },
    created() {
      this.Id = this.$route.query.id
      this.getList(this.Id)
      this.getNoticeFeedbackList()
    },
  }
</script>

<style scoped lang="scss">
.detail_box{
  width: 100%;
  height: calc(100vh - 86px);
  box-sizing: border-box;
  padding: 0 10%;
  overflow-y: auto;
  padding-top: 30px;
  position: relative;
}
.operateBtn{
  position: absolute;
  top:34px;
  right: 10%;
  display: flex;
}
.title{
  width: 100%;
  display: flex;
  justify-content: center;
  font-size:22px;
  color: #333;
  font-weight: 600;
  margin-bottom:40px;
  div{
    max-width: 70%;
    overflow:hidden; //超出的文本隐藏
    text-overflow:ellipsis; //用省略号显示
    white-space:nowrap; //不换行
    margin-right: 20px;
  }
}

.table_list{
		margin-bottom:40px;
	  ::v-deep .el-table__header tr,
	   ::v-deep .el-table__header th {
	     padding: 0;
	     height: 42px;
	     font-size:14px;
	     color: #666;
	     font-weight: 500;
	     background: #F5F7FA !important;
	     border-color: #E6E6E6 !important;
	     text-align: center;
	   }
	   ::v-deep .el-table__body tr,
	     ::v-deep .el-table__body td {
	       padding: 0;
	       height: 42px;
	       font-size: 14px;
	       color: #666;
	       text-align: center;
	   }
	}
  .operate_btn{
    width:18%;
    display: flex;
    justify-content: space-between;
  }
  .cont_darawer{
    width: 100%;
    height: 500px;
    box-sizing: border-box;
    margin-top: 20px;
    padding:0px 20px;
  }

  ::v-deep .el-drawer__header{
    margin-bottom: 0 !important;
    padding-bottom: 20px;
    border-bottom: 1px solid #DBDCDD;
  }
  ::v-deep .el-upload--picture-card{
    display: none !important;
  }
  .unitList{
    width: 100%;
    margin-bottom:30px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top:10px;
    .unitItem{
      width:120px;
      height:48px;
      margin: 10px 30px;
      box-sizing: border-box;
      border-bottom: 1px solid #DBDCDD;
      position: relative;
      &:first-child{
        margin-left: 10px;
      }
      &:nth-child(5){
        margin-left: 10px;
      }
      &:nth-child(9){
        margin-left: 10px;
      }
      &:nth-child(13){
        margin-left: 10px;
      }
      .unitname{
        padding: 0 5px;
        line-height: 48px;
        font-size: 14px;
        color: #333;
        overflow:hidden; //超出的文本隐藏
        text-overflow:ellipsis; //用省略号显示
        white-space:nowrap; //不换行
      }
      .readImg{
        width:20px;
        position: absolute;
        right:0px;
        top:15px;
      }
      .feekImg{
        width:18px;
        position: absolute;
        right:-30px;
        top:15px;
        cursor: pointer;
      }
    }
  }
</style>
